<template>
  <a-cascader
    v-model.trim="attrObj.formModel[attrObj.formProps]"
    :options="cascaderOptions"
    :load-data="loadData"
    :placeholder="PLACEHOLDER_SELECT"
    change-on-select
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
import { PLACEHOLDER_SELECT } from "@/config/const";
import { getArea } from "@/services/businessManage";
export default {
  name: 'CascaderOption',
  data () {
    return {
      PLACEHOLDER_SELECT,
      cascaderOptions: []
    }
  },
  props: {
    attrObj: {
      type: Object,
      default() {
        return {
          formProps: "",
          formModel: {},
          disabled: false
        };
      }
    }
  },
  mounted() {
    // 获取省份
    this.getArea();
  },
  computed: {
  },
  methods: {
    async getArea(areaCode = 0) {
      const {
        data: {
          code,
          data: { areas }
        }
      } = await getArea(areaCode);
      if (code === 200) {
        this.cascaderOptions = this.handleAreaCode(areas);
      }
    },
    async loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      const {
        data: {
          code,
          data: { areas }
        }
      } = await getArea(targetOption.value);
      if (code === 200) {
        targetOption.loading = false;
        targetOption.children = this.handleAreaCode(areas);
        this.cascaderOptions = [...this.cascaderOptions];
      }
    },
    handleAreaCode(areas) {
      return areas.map((o) => ({value: o.code, label: o.name, isLeaf: o.level === '3' ? true : false }));
    }
  }
}
</script>

<style lang="less" scoped>

</style>
